<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>角色列表</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <link rel="stylesheet" href="../../../static/kaige/layuiextend/dtree/dtree.css">
    <link rel="stylesheet" href="../../../static/kaige/layuiextend/dtree/font/dtreefont.css">
    <style>
        .sz-row:after,
        .sz-row:before {
            content: "";
            display: block;
            clear: both
        }

        .sz-col-1,
        .sz-col-2 {
            position: relative;
            display: block;
            box-sizing: border-box;
            float: left;
            height: 100%;
        }

        .sz-col-1 {
            width: 480px;
            text-align: center;
            height: 100%;
        }

        .sz-col-2 {
            width: 320px;
            height: 100%;
        }

        .pl5 {
            padding-left: 15px !important;
        }
    </style>
</head>

<body>
    <div class="kaige-body kaige-btn-radius">
        <table class="layui-table" id="roleTable" lay-filter="roleTable" lay-size="sm"></table>
        <input type="hidden" name="keywordsCache" value="{}" />
    </div>
    <script>
        load_init_js(function () {
            layui.config({
                base: szoapcpath + '/static/kaige/layuiextend/'
            }).extend({
                dtree: 'dtree/dtree'
            }).use(['table', 'form', 'layer', 'dtree', 'util', 'kaige'], function () {
                var element = layui.element,
                    layer = layui.layer,
                    table = layui.table,
                    util = layui.util,
                    dtree = layui.dtree,
                    form = layui.form,
                    laytpl = layui.laytpl,
                    kaige = layui.kaige,
                    $ = layui.$;
                form.render();
                window.pagedict = parent.window.kaige_page.dict || {};

                kaige.table({
                    elem: '#roleTable',
                    height: 'full-25',
                    url: "/sys.role/index",
                    id: 'roleTable',
                    toolbar: '#dtoolbar',
                    defaultToolbar: ['filter'],
                    cols: [[
                        { field: 'id', width: 90, title: 'ID', align: 'center' },
                        { field: 'name', width: 200, title: '角色名称', align: 'center' },
                        {
                            field: 'data_permission', width: 200, title: '数据权限', align: 'center', templet: function (d) {
                                return pagedict.data_permission[d.data_permission];
                            }
                        },
                        { field: 'code', width: 200, title: '角色编码', align: 'center' },
                        { field: 'user_ids', width: 200, title: '可查看', align: 'center', hide: true },
                        { field: 'create_time', width: 180, title: '创建时间', width: 160, align: 'center' },
                        { title: '操作', toolbar: '#dtrbar', align: 'center', width: 220, fixed: 'right' }
                    ]]
                });

                //列表-监听表头工具栏事件dtoolbar
                table.on('toolbar(roleTable)', function (obj) {
                    //var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'btn-add':
                            btnadd();
                            break;
                        case 'btn-search':
                            btnsearch();
                            break;
                    }
                });

                //列表-监听单元格行工具事件dtrbar
                table.on('tool(roleTable)', function (obj) {
                    var that = this;
                    var data = obj.data;
                    switch (obj.event) {
                        case 'dataprem':
                            bardataprem(data);
                            break;
                        case 'auz':
                            barauz(data);
                            break;
                        case 'edit':
                            baredit(data);
                            break;
                        case 'del':
                            bardel(data);
                            break;
                    }
                });

                //添加
                function btnadd() {
                    kaige.form({
                        title: '<i class="layui-icon layui-icon-add-circle"></i> 添加角色'
                        , url: '/sys.role/add' //数据源
                        , data: {}
                        , id: 'kaige'
                        , tablelayid: 'roleTable'
                        , area: ['400px', '400px']
                        , overflow: true
                        , encode: 1
                        , callbefore: function (layero, index) {
                            addedit();
                        },
                    });
                }

                //编辑
                function baredit(d) {
                    kaige.form({
                        title: '<i class="layui-icon layui-icon-add-circle"></i> 编辑角色'
                        , url: '/sys.role/edit' //数据源
                        , data: { id: d.id }
                        , id: 'kaige'
                        , tablelayid: 'roleTable'
                        , area: ['400px', '400px']
                        , overflow: true
                        , encode: 1
                        , callbefore: function (layero, index) {
                            addedit();
                        },
                    });
                }

                function addedit() {
                    form.on('select(data_permission)', function (data) {
                        if (data.value == 7) {
                            $('#customize_box').removeClass('layui-hide');
                        } else {
                            $('#customize_box').addClass('layui-hide');
                            $('#customize_name').val('');//清空值
                            $('#customize').val('');//清空值
                        }
                    });
                    //适用对象
                    $('#customize_name').on('click', function () {
                        layer.open({
                            title: '选择可查看对象',
                            content: szoa.client.path + '/pages/pmm/config/ugdc.html',
                            area: ['690px', '470px'],
                            type: 2,
                            success: function (layero, index) {
                                window.ugdcinfo = function (opt) {
                                    $('#customize_name').val(opt.names);
                                    $('#customize').val(opt.ids);
                                    layer.close(layer.index);
                                }
                            }
                        });
                    });
                }

                //角色删除
                function bardel(d) {
                    layer.confirm('您确定删除此角色吗？', {
                        title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
                        btn: ['确认', '取消']
                    }, function () {
                        $.post("/sys.role/del", { id: d.id }, function (res) {
                            res.status && table.reload('roleTable');
                            layer.msg(res.msg);
                        });
                    });
                };

                //角色权限设置
                function barauz(d) {
                    var DTree;
                    var id = d.id;
                    layer.open({
                        type: 1,
                        title: '<i class="layui-icon layui-icon-auz"></i> 角色菜单权限',
                        area: ['860px', '700px'],
                        btn: ['保存', '关闭'],
                        content: '<div class="kaige-body" id="roleset" style="background-color: #fff;"></div>',
                        maxmin: true,
                        success: function (layero, index) {
                            var tpldata = {
                                id: d.id,
                                name: d.name,
                                permission: pagedict.data_permission[d.data_permission],
                                user_ids: d.user_ids
                            };
                            laytpl($("#ROLETPL").html()).render(tpldata, function (shtml) {
                                $("#roleset").empty().html(shtml);
                                form.render();
                                setTimeout(function () {
                                    table.render({
                                        elem: '#roleuserlist',
                                        url: "/sys.role/getroleuser",
                                        where: { id: id },
                                        page: {
                                            layout: ['prev', 'page', 'next', 'refresh'],
                                            groups: 8,
                                            limits: [20, 50, 100, 150, 200, 300, 500, 1000]
                                        },
                                        limit: '20',
                                        method: 'GET',
                                        cols: [[
                                            { field: 'real_name', title: '姓名'},
                                            {
                                                field: 'sex', title: '性别', templet: function (d3) {
                                                    return sex2icon(d3.sex);
                                                }
                                            },
                                            { field: 'dept_id_name', title: '部门'},
                                            { field: 'ranking_id_name', title: '职位' }
                                        ]]
                                    });
                                }, 100);
                                setTimeout(function () {
                                    var obj = $("#roleTree");
                                    obj.css('height', 530);
                                    DTree = dtree.render({
                                        obj: obj,
                                        initLevel: 1,
                                        request: { "id": id }, // 角色ID
                                        url: '/sys.role/setauz',
                                        menubar: true,
                                        checkbar: true,
                                        cache: true,
                                        line: true,
                                        checkbarType: 'all-self',//选中类型
                                        response: { message: "msg", statusCode: 0 },
                                        dataStyle: "layuiStyle",
                                    });
                                    if (d && d.data_permission == 7) {
                                        $.get('/select/useridslist', { ids: d.user_ids }, function (res) {
                                            if (res.status) {
                                                var dhtml = '';
                                                layui.each(res.data, function (i5, e5) {
                                                    dhtml += '<tr><td>' + e5.name + '</td><td>' + sex2icon(e5.sex) + '</td><td>' + e5.dept_id_name + '</td><td>' + e5.ranking_id_name + '</td></tr>';
                                                });
                                                $('#data_user_box').removeClass('layui-hide');
                                                $('#data_user_list').empty().html(dhtml);
                                            }
                                        });
                                    }
                                }, 300);

                            });
                        },
                        yes: function (index, layero) {
                            var thedata = dtree.getCheckbarNodesParam(DTree);
                            var ids = [], updata = {};
                            $.each(thedata, function (i, obj) {
                                ids.push(obj.basicData);
                            });
                            updata = {
                                'id': id,
                                'data': ids.join(',')
                            };
                            $.post('/sys.role/savePerm', updata, function (re) {
                                layer.msg(re.msg);
                                if (re.status) {
                                    layer.close(index);
                                }
                            });
                        }
                    });
                }
            });
        });
    </script>
    <script type="text/html" id="dtrbar">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" lay-event="auz" title="角色权限"><i class="layui-icon layui-icon-auz"></i></button>
            <button class="layui-btn layui-btn-sm" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>            
            <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
        </div>
    </script>
    <script type="text/html" id="dtoolbar">
        <div class="layui-form" lay-filter="searchform">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" lay-event="btn-add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
            </div>
        </div>
    </script>
    <script id="kaige_form_html" type="text/html">
        <form class="kaige-body layui-form layui-form-pane" lay-filter="kaige_form_lay_filter">
            {{# if(d.id){ }}
            <input type="hidden" name="id" value="{{ d.id }}" />
            {{# } }}
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input name="name" value="{{ d.name|| '' }}" lay-verify="required" lay-reqtext="请输入角色名称" placeholder="请输入角色名称" class="layui-input" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色编码</label>
                <div class="layui-input-block">
                    <input name="code" value="{{ d.code|| '' }}" lay-verify="required" lay-reqtext="请输入角色编码" placeholder="请输入角色编码" class="layui-input" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据权限</label>
                <div class="layui-input-block">
                    <select name="data_permission" lay-verify="required" lay-reqtext="请选择数据权限" lay-filter="data_permission">
                        <option value=""></option>
                        {{# for(var ipd in pagedict.data_permission){ }}
                        <option value="{{ ipd }}" {{ d.data_permission==ipd ? 'selected' :'' }}>{{ pagedict.data_permission[ipd] }}</option>
                        {{# } }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item  {{ d.data_permission==7 ? '' :'layui-hide' }}" id="customize_box">
                <label class="layui-form-label">自定义数据</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="重新选择会覆盖原来的" readonly id="customize_name" />
                    <input name="user_ids" type="hidden" value="{{ d.user_ids|| '' }}" id="customize"/>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
            </div>
        </form>
    </script>
    <script type="text/html" id="ROLETPL">
        <div class="sz-row">
            <div class="sz-col-1 layui-form layui-form-pane" style="text-align: left;">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                    <div class="layui-form-mid layui-word-aux pl5" style="color:#333 !important;">{{ d.name }}</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据权限</label>
                    <div class="layui-form-mid" style="color: #333;padding-left: 15px !important;">{{ d.permission || ''}}</div>
                </div>

                <div class="layui-hide" id="data_user_box" style="margin: 3px 0 10px 0;">
                    <blockquote class="layui-elem-quote">
                        数据权限（可以查看以下人员的数据）
                    </blockquote>
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <td>姓名</td>
                                <td>性别</td>
                                <td>部门</td>
                                <td>职位</td>
                            </tr>
                        </thead>
                        <tbody id="data_user_list"></tbody>
                    </table>
                </div>
                <blockquote class="layui-elem-quote">
                    菜单权限（以下用户会受到编辑影响）
                </blockquote>
                <table id="roleuserlist" lay-filter="role_user_list" class="layui-hide"></table>
            </div>
            <div class="sz-col-2">
                <ul id="roleTree" class="dtree" data-id="0" style="max-width: 320px;overflow-y: auto;overflow-x: hidden;"></ul>
            </div>
        </div>
    </script>
</body>

</html>